<template>
  <a-modal
    :mask-closable="false"
    v-model:visible="visible"
    :width="800"
    :on-before-ok="handleOk"
    @handleCancel="handleCancel"
    ok-text="确定"
    title-align="start"
    class="overflow-hidden"
    title="修改密码"
  >
    <a-scrollbar style="overflow: auto" class="h-[200px]">
      <a-form class="close-form" :rules="rules" :model="form" ref="editformref">
        <a-form-item field="oldpassword" label="旧密码" asterisk-position="end">
          <a-input v-model="form.oldpassword" placeholder="请输入你的旧密码" />
        </a-form-item>
        <a-form-item field="newpassword" label="新密码" asterisk-position="end">
          <a-input v-model="form.newpassword" placeholder="请输入你的新密码" />
        </a-form-item>
      </a-form>
    </a-scrollbar>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { editPassword } from "@/api/user";
import router from "@/router";
const emits = defineEmits(["close"]);
const visible = ref(false);
const editformref = ref();
const form = ref({
  newpassword: "",
  oldpassword: "",
});
const rules = {
  oldpassword: [{ required: true, message: "此选项必填" }],
  newpassword: [{ required: true, message: "此选项必填" }],
};
const handleCancel = () => {
  console.log("999");
  emits("close");
};
const handleOk = (done: (closed: boolean) => void | boolean) => {
  editformref.value.validate(async (val: { string: string }) => {
    if (val == undefined) {
      try {
        let res = await editPassword({ ...form.value });
        if (res.code == 200) {
          localStorage.removeItem("token");
          Message.success("修改成功");
          setTimeout(() => {
            router.push({
              path: "/login",
            });
          }, 300);
          done(true);
          console.log("0000");
        } else {
          Message.success("修改失败");
          done(false);
        }
      } catch (error) {
        console.error(error);
      }
    } else {
      console.log("7777");

      done(false);
    }
  });
};
</script>
<style lang="less"></style>
